<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
    <style>
        .file-box{
            display: inline-block;
            width: 160px;
            height: 160px;
            border: 1px solid #aaa;
            background-color: #dedede;
            cursor: pointer;
        }
        .file-box1{
            display: inline-block;
            width: 240px;
            height: 50px;
            border: 1px solid #aaa;
            /* background-color: #dedede; */
            cursor: pointer;
            text-align: center;
        }
        .file-box1 > input[type='file']{
            display: none;
        }
        .file-box > input[type='file']{
            display: none;
        }
        .file-box > img, .file-box1 > img,.file-box >video,.file-box1 > audio{
            width: 100%;
            height: 100%;
            overflow: hidden;
            object-fit: scale-down;
            object-position: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <pre v-pre class="note">
        
        </pre>
        <!-- file 输入框是一个只读标签 -->
        <!-- <input type="file" v-model="file"> -->
        <!-- 
            通过vue实现文件选择器的“双向绑定” 
                => 双向数据绑定实际上就是数据变量的两种操作方式的整合
                    1、变量被渲染到页面中
                    2、变量被页面事件所修改
        -->
        <label class="file-box">
            <img :src="file.path">
            <input type="file" @change="chooseFile($event.target)">
        </label>
        <br><br>
        <input type="button" value="上传到服务器">
        <hr>
        <label class="file-box">
            <img v-show="!file1.blob" :src="file.path">
            <video v-show="file1.blob" :src="file1.path" controls></video>
            <input type="file" @change="chooseFile1($event.target)">
        </label>
        <hr>
        <label class="file-box1">
            <img v-show="!file2.blob" :src="file.path">
            <audio v-show="file2.blob" :src="file2.path" controls></audio>
            <input type="file" @change="chooseFile2($event.target)">
        </label>
        <hr>
        <label class="file-box">
            <img :src="file3.path">
            <input type="file" @change="chooseFile3($event.target)">
        </label>
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    file:{
                        path:"../assets/img/update (1).png",
                        blob:null
                    },
                    file1:{
                        path:"../assets/img/update (1).png",
                        blob:null
                    },
                    file2:{
                        path:"../assets/img/update (1).png",
                        blob:null
                    },
                    file3:{
                        path:"../assets/img/update (1).png",
                        blob:null
                    },
                }
            },
            methods:{
                chooseFile(fileDom){
                    let file = fileDom.files[0];
                    console.log(file,window.URL.createObjectURL(file))
                    this.file.path = window.URL.createObjectURL(file);
                    this.file.blob = file;
                },
                chooseFile1(fileDom){
                    let file = fileDom.files[0];
                    this.file1.path = window.URL.createObjectURL(file);
                    this.file1.blob = file;
                },
                chooseFile2(fileDom){
                    let file = fileDom.files[0];
                    this.file2.path = window.URL.createObjectURL(file);
                    this.file2.blob = file;
                },
                chooseFile3(fileDom){
                    let file = fileDom.files[0];
                    let icons = [
                        "../assets/img/file-zip.png",
                        // ……
                    ]
                    let tempPath = ""
                    if(file.name.endsWith("zip")){
                        tempPath = icons[0]
                    }
                    this.file3.path = tempPath;
                    this.file3.blob = file;
                }
            }
        }).mount("#app");
    </script>
</body>
</html>